<template>
	<div class="site_info_manage">
		<div class="content">
			<el-form :model="siteData" :rules="siteRules" size="small" label-width="120px">
				<el-form-item v-for="(item, index) in siteInfoOption" :key="index" :label="item.label" :prop="item.field">
					<template v-if="item.type === 1">
						<el-input v-model="siteData[item.field]" :style="{ width: item.width }"></el-input>
					</template>
					<template v-else-if="item.type === 2">
						<sw-number-input v-model="siteData[item.field]" :maxlength="11" :style="{ width: item.width }"></sw-number-input>
						<span class="unit" v-if="!!item.unit">{{ item.unit }}</span>
					</template>
					<template v-else-if="item.type === 3">
						<sw-image-uploader v-model="siteData[item.field]" :accept="item.accept" :upload-tips="item.tips"></sw-image-uploader>
					</template>
				</el-form-item>
			</el-form>
		</div>
		<div class="button">
			<el-button size="medium" type="primary" icon="iconfont icon-interactive-save" :disabled="isDisabled" @click="handleSaveSiteInfo">保存配置</el-button>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { addedSiteInfo, updateSiteInfo } from '@/api/system/tbSysSite';
export default {
	data() {
		return {
			siteData: {},
			siteRules: {
				name: [{ required: true, message: '请输入网站名称', trigger: 'blur' }]
			},
			siteInfoOption: [
				{ label: '网站名称', field: 'name', type: 1, width: '75%' },
				{ label: '版权信息', field: 'field4', type: 1, width: '75%' },
				{ label: '电话', field: 'field5', type: 2, width: '240px' },
				{ label: '地址', field: 'field6', type: 1, width: '75%' },
				{ label: '系统退出时间', field: 'quitTime', type: 2, width: '80px', unit: '分钟' },
				{ label: '用户默认头像', field: 'userPic', type: 3, accept: 'jpg,png', tips: '建议尺寸为128*128，jpg或png格式' },
				{ label: '网站LOGO', field: 'webLogo', type: 3, accept: 'png', tips: '建议上传尺寸为512*512的png图片' },
				{ label: '网站页脚LOGO', field: 'field7', type: 3, accept: 'png' },
				{ label: '登录页背景', field: 'field1', type: 3, accept: 'jpg', tips: '建议上传尺寸为1920x1080的jpg图片' },
				{ label: '登录页LOGO', field: 'field8', type: 3 },
				{ label: '资源默认封面', field: 'field3', type: 3 }
			]
		};
	},
	computed: {
		...mapGetters(['siteInfo']),
		addOrEdit() {
			return Object.keys(this.siteInfo).length === 0;
		},
		siteInfoData() {
			let obj = {};
			this.siteInfoOption.forEach((item) => {
				obj[item.field] = this.siteInfo[item.field];
			});
			return obj;
		},
		isDisabled() {
			return this.$lodash.isEqual(this.siteInfoData, this.siteData);
		}
	},
	mounted() {
		this.siteData = this.$lodash.cloneDeep(this.siteInfoData);
	},
	methods: {
		//格式化基本信息参数
		formatBaseInfoParams() {
			let params = { ...this.siteData };
			if (!this.addOrEdit) {
				params['id'] = this.siteInfo.id;
			}
			params['del'] = Number(params.del);
			params['quitTime'] = Number(params.quitTime);
			return params;
		},

		//保存网站基本信息
		async handleSaveSiteInfo() {
			let params = this.formatBaseInfoParams();
			let callFunction = eval(this.addOrEdit ? addedSiteInfo : updateSiteInfo);
			let result = await callFunction(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('更新网站基本信息成功');
				this.$store.dispatch('getSiteBaseInfo');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.site_info_manage {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	.content {
		flex: 1;
		overflow: auto;
		padding: 32px 16px 10px;
		span.unit {
			margin-left: 10px;
		}
	}
	.button {
		flex-shrink: 0;
		padding: 16px;
		border-top: solid 1px #f5f7fa;
		text-align: right;
	}
}
</style>
